<template>
	<div id="app">

		<br />

		<!-- 病例个人信息展示 -->
		<el-card shadow="always" v-bind:style="styleBigTable">
			<div style="width: 300px; float: right;">
				<el-input v-model="input" placeholder="请输入挂号单号" style="width:200px; inline-block;"></el-input>
				<el-button type="primary" icon="el-icon-search" style="display: inline-block;" @click="handleSearch">搜索
				</el-button>
			</div>
			<el-descriptions title="病例信息">
				<el-descriptions-item label="挂号单号">{{form.guaId}}</el-descriptions-item>
				<el-descriptions-item label="姓名">{{form.patientName}}</el-descriptions-item>
				<el-descriptions-item label="年龄">{{form.patientAge}}</el-descriptions-item>
				<el-descriptions-item label="性别">{{form.patientGender}}</el-descriptions-item>
				<el-descriptions-item label="科室">{{form.depName}}</el-descriptions-item>
				<el-descriptions-item label="就诊医生">{{form.doctorName}}</el-descriptions-item>
				<el-descriptions-item label="联系电话">{{form.patientTel}}</el-descriptions-item>
				<el-descriptions-item label="身份证号">{{form.patientIdCard}}</el-descriptions-item>
				<el-descriptions-item label="操作">
					<el-tag size="small">
						<el-button type="text" size="mini" v-on:click="how">项目划价</el-button>
					</el-tag>
				</el-descriptions-item>
				<el-descriptions-item label="症状">{{form.symptom}}</el-descriptions-item>
			</el-descriptions>
		</el-card>

		<el-card shadow="always" v-bind:style="styleTable">
			<!-- 获取病例的检查项目信息单 -->
			<span style="float: left;font-size: large;font-weight: bolder;">检查项目</span>
			<div style="float: right;">
				<el-tag size="medium" style="margin-left: 500px;">总计：{{total}}元</el-tag>
				<el-button type="primary" size="mini" @click="handleAccount">提交<i
						class="el-icon-upload el-icon--right"></i></el-button>
			</div>
			<el-table :data="tableCheck" style="width: 100%" max-height="250">

				<el-table-column prop="itemName" label="项目名" width="300px"> </el-table-column>
				<el-table-column prop="num" label="次数" width="300px"></el-table-column>
				<el-table-column prop="price" label="价格/元" width="300px"></el-table-column>
				<el-table-column label="操作" width="300px">
					<template slot-scope="scope">
						<el-button icon="el-icon-delete-solid"
							@click.native.prevent="deleteRow(scope.$index, tableCheck)" type="text" size="small">
							移除
						</el-button>
					</template>
				</el-table-column>
			</el-table>

			<!-- 继续添加项目 -->
			<div>
				<el-button type="info" icon="el-icon-document-add" round @click="dialogTableVisible = true">添加检查项
				</el-button>
			</div>



			<!-- 弹出检查项目信息表，供医生选择 -->
			<el-dialog title="检查项目信息" :visible.sync="dialogTableVisible">
				<el-table :data="tableData" style="width: 100%">

					<el-table-column label="检查项目" prop="itemName"></el-table-column>
					<el-table-column label="次数" prop="num"></el-table-column>
					<el-table-column label="单价/元" prop="price"></el-table-column>
					<el-table-column align="center">
						<template slot="header" slot-scope="scope">
							<el-input v-model="search" size="mini" placeholder="检查项目" />
						</template>
						<template slot-scope="scope">
							<el-button size="mini" @click="handleAdd(scope.$index, scope.row)">添加</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-dialog>



		</el-card>

		<el-card shadow="always" v-bind:style="styleResult">
			<el-col :sm="12" :lg="6">
				<el-result icon="success" title="成功提示" subTitle="请根据提示进行操作">
					<template slot="extra">
						<el-button type="primary" size="medium" @click="fanhui">返回</el-button>
					</template>
				</el-result>
			</el-col>
		</el-card>
	</div>
</template>

<script>
	export default {
		name: 'GetProject',
		data() {
			return {
				form: {
					guaId: '',
					patientName: '',
					patientAge: '',
					patientGender: '',
					depName: '',
					doctorName: '',
					patientTel: '',
					patientIdCard: '',
					symptom: '',
				},
				totalProject: 0,
				input: '',
				dialogTableVisible: false,
				styleBigTable: {
					display: ''
				},
				styleTable: {
					display: 'none'
				},
				styleResult: {
					display: 'none'
				},
				tableCase: [],
				tableCheck: [],
				tableData: [{
						itemName: '血常规',
						num: 1,
						price: 80
					},
					{
						itemName: '尿常规',
						num: 1,
						price: 200
					},
					{
						itemName: 'X光透视',
						num: 1,
						price: 120
					},
					{
						itemName: 'CT平扫',
						num: 1,
						price: 500
					},
					{
						itemName: '彩超',
						num: 1,
						price: 210
					}
				],
				search: ''
			}
		},
		methods: {
			fanhui() {
				this.form = this.$options.data().form;
				this.styleResult.display = 'none';
				this.styleBigTable.display = '';
			},
			handleAccount() {

				console.log(this.totalProject)
				if (this.tableCheck.length != 0) {
					this.$http.post("http://localhost:8088/accountProject", {
							tableCheck: this.tableCheck,
							totalProject: this.totalProject,
							guaId: this.form.guaId,
							doctorId: localStorage.getItem("doctorId")
						})
						.then(response => {
							console.log(response);
							if (response.data.data != 0) {
								// alert(response.data.data)
								// alert("插入成功")
								this.styleResult.display = '';
								this.styleTable.display = 'none';
								this.styleBigTable.display = 'none';
								this.tableCheck = this.$options.data().tableCheck;
							}
						})
				} else {
					this.$message({
						message: '请先选择检查项目',
						type: 'warning'
					});
				}

			},
			handleSearch() {
				this.styleResult.display = 'none';
				this.styleTable.display = 'none';
				this.$http.get("http://localhost:8088/searchPatientByProject", {
						params: {
							input: this.input
						}
					})
					.then(response => {
						console.log(response);
						this.input = null;
						if (response.data.data != null) {
							this.form = response.data.data;
						} else {
							this.$message({
								message: '警告哦，不存在该病例信息，请你再想想',
								type: 'warning'
							});
							this.form = this.$options.data().form
						}
					})
					.catch(error => {
						console.log(error);
					})
			},
			show() {
				console.log(this.$router);
				//this.tableCase.splice(0,this.tableCase.length);//清空数组
				if (this.$route.params.guaId != null) {
					this.input = this.$route.params.guaId;
					this.handleSearch();
				}
			},
			how() {
				if (this.form.guaId != '') {
					console.log(this.form);
					this.$confirm('是否划价', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$message({
							type: 'success',
							message: '开始划价!'
						});
						this.styleTable.display = '';

					}).catch(() => {
						this.$message({
							type: 'info',
							message: '取消划价'
						});
					});
				} else {
					this.$message({
						message: '警告哦，请先获取病历信息',
						type: 'warning'
					});
				}

			},
			deleteRow(index, rows) {
				rows.splice(index, 1);
			},
			handleAdd(index, row) {
				this.tableCheck.forEach(function (item, index) {
					if (item.itemName == row.itemName) {
						alert("已存在");
						this.$message({
							message: '警告哦，这是一条警告消息',
							type: 'warning'
						});
					}
				});
				this.tableCheck.push(row); //将选中项目添加到病人需做的项目中
			}
		},
		computed: {
			total() {
				let amount = 0.0;
				for (let i = 0; i < this.tableCheck.length; i++) {
					amount += this.tableCheck[i].num * this.tableCheck[i].price;
				}
				this.totalProject = amount;
				return amount;
			}
		},
		mounted() {
			this.show();
		}

	}
</script>

<style>
</style>